<template>
  <div id="updatePwd_container">
    <div class="updatePwd-wrap">
      <Return title="修改登录密码"></Return>
      <div class="form-body">
        <el-form :model="ruleForm" ref="ruleForm" :rules="rules">
          <el-form-item prop="oldPass" class="custom-item">
            <el-input
              class="custom-input"
              type="password"
              placeholder="原始密码"
              v-model="ruleForm.oldPass"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item prop="pass" class="custom-input">
            <el-input
              type="password"
              v-model="ruleForm.pass"
              placeholder="新密码"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item prop="checkPass" class="custom-input">
            <el-input
              type="password"
              placeholder="确认密码"
              v-model="ruleForm.checkPass"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item prop="securityCode" class="custom-input">
            <el-input
              v-model="ruleForm.securityCode"
              autocomplete="off"
              placeholder="验证码"
            ></el-input>
            <Vcode :ruleForm="ruleForm"></Vcode>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">确定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import Vcode from '@/components/Vcode/Vcode'
export default {
  name: "UpdatePwd",
  components: { Vcode },
  data() {
    var validateOldPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入旧密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validateCode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else if (value !== this.ruleForm.securityCode) {
        callback(new Error("验证码错误，请重新输入"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        pass: "",
        checkPass: "",
        oldPass: "",
        securityCode: "",
      },
      vcode: '',
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        oldPass: [{ validator: validateOldPass, trigger: "blur" }],
        securityCode: [{ validator: validateCode, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm() {
      // 校验
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let reqData = {
            id: this.$store.state.userAbout.user_id || JSON.parse(localStorage.getItem('userInfo')).id,
            oldPass: this.ruleForm.oldPass,
            newPass: this.ruleForm.pass,
          };
          this.UpdatePassword(reqData)
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    ...mapActions('userAbout', ['UpdatePassword'])
  },
};
</script>

<style lang="scss" scoped>
#updatePwd_container {
  z-index: 2;
  position: absolute;
  right: 0;
  top: 0;
  width: 408px;
  height: 100%;
  overflow: hidden;
  background-color: #34393f;
  .updatePwd-wrap {
    width: 348px;
    margin: auto;
    .form-body {
      .vcode {
        border: none;
      }
    }
  }
}
</style>>